Cordova App Builder - Icons and Splash Screens

Description

Automatically build splash screens and 9-patch images for iOS and Android Cordova applications using Alpha Anywhere.

Discussion

The Application Master Image Resources category can be used to generate a series of 9-patch splash screen images for Android devices (iOS does not support 9-patch images without additional libraries).

images/pgsplashscreens.gif
For apps built with Alpha Anywhere 4.3.2 or older, is very important that you create a new Cordova Project when generating custom icons and splash screens for your app because the Cordova app config.xml file has been changed significantly to support new functionality.

When you supply a single image that needs to be resized for the numerous aspect ratios required by all of the different types of mobile devices, the aspect ratio will typically change and the resulting image will be out of proportion. The new resizing code uses a center weighting technique to clip the image without any change to the image aspect ratio. This technique is used for the generation of all of the splash screens and you need to be aware of that when you supply the images for the portrait or landscape orientations.

If no image files are supplied, Alpha Anywhere uses the default image shown below:

images/splash.png

Recommended Image Sizes

For portrait splash screens, the recommended size is 1536px x 2048px.

For landscape splash screens, the recommended size is 2048px x 1536px.

You can also specify a square image (suggested size is 2732px x 2732px) for both orientations and the resulting images will not be distorted.

Android 9-patch images

A 9-patch image is a standard png file that has been divided into a matrix of 3 x 3 rectangles (like a tic-tac-toe board). Each region in the matrix has specific stretch properties that allow the image to be resized without altering the aspect ratio of the center weighted rectangles. As such, 9-patch images can be stretched to fit the different screen sizes without clipping or distortion. You need to supply a square image that will be used for both portrait and landscape modes and the graphics need to be center weighted. The recommended size is 2732px x 2732px.

For more info on 9-patch splash screen images see: Cordova Splashscreen Plugin Documentation

See Also